.opacity(@opa: 50){
    filter: alpha(opacity=@opa);
    opacity: @opa/100;
}
.gradient-45_0(@from: top, @to: bottom){
    background-image: -webkit-linear-gradient(@from, rgba(255,255,255,.45) 0, rgba(255,255,255,.0) 100%);
    background-image: linear-gradient(to @to, rgba(255,255,255,.45) 0, rgba(255,255,255,.0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#37ffffff', endColorstr='#00ffffff', GradientType=0);
}
// datepicker 中颜色
@date-select-bg: #a9e9ad;
@week-bg: #65a4f3;// 周末显示时背景
@wwday-color: #65a4f3;// 周末高亮时文字颜色
// 正文字号、字体
@font-size: 12px;
@font-l-size: 14px;
@font: ~"@{font-size}/1.5" "tahoma", "arial", "Hiragino Sans GB", "\5b8b\4f53", "sans-serif";
// 边框（size、圆角）
@border-size: 1px;
@border-radius: 5px;
// 普通
@color: #003f59;
@color-light: #558193;
@bg: #fff;
@border-c: #94c0d2;
// 悬停
@hover-color: #003f59;
@hover-bg: #eaf4f9;
@hover-border-c: #7ec6e3;
// 选中
@sel-color: #fff;
@sel-bg: #2B7797;
@sel-border-c: #003f59;
// 禁用 -- 透明度 为.5
@disable-color: #64a1bb;
@disable-bg: #eaf4f9;
.disabled(){ .opacity(50);}
// ------- 标题（accordion、datagrid、dialog、dividedbox、datepicker）
@title-color: #003F59;
@title-bg: #daecf4;
@title-padding: 5px;
// ------- 工具栏
@tool-color: @color-light;// 工具栏（datagrid、menu、datepicker）
@tool-hover-color: @color;
@tool-bg: #ecf8ff;
// 正文容器的 padding
@cont-padding: 10px;
// 文字阴影（carousel 中 arrow）
@text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
// 遮罩层颜色
@mask-color: rgba(0, 0, 0, .15);
//边框发散（聚焦）
.box-shadow(){
    -moz-box-shadow: 2px 2px 10px 0 rgba(183,228,247,0.78);
    -webkit-box-shadow: 2px 2px 10px 0 rgba(183,228,247,0.78);
    box-shadow: 2px 2px 10px 0 rgba(183,228,247,0.78);
}
// resize 时跟随的 bar
@followbar-color: #9e9e9e;
// 高亮
@highlight-c: #0C970C;
@highlight-bg-c: #333;
@highlight-bg: #ffd256;
// 外部发散（dialog 边界）
@outline-color: #7ec6e3;
.outline {
    outline: 0;
    -moz-box-shadow: 0 0 4px 1px @outline-color;
    -webkit-box-shadow: 0 0 4px 1px @outline-color;
    box-shadow: 0 0 4px 1px @outline-color;
}
// 滚动条占位宽度
@scroll-w: 17px;
// ------- 文本类 表单元素
// 字号大小改变时可能改变 input 的高度，需同步修改
@textinput-h: 23px;
@textinput-color: @color;
@textinput-bg: @bg;
@textinput-padding: 2px;
@input-border: solid @border-size @border-c;
.textinput(){
    color: @textinput-color;
    background-color: @textinput-bg;
    border: @input-border;
    padding: @textinput-padding;
    outline: none;
}
// ------- 按钮：文字颜色、边框在 class 中自定义，.btn-bg() 等中只含背景的定义
@btn-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); // 内阴影
@btn-font-color: @color;
.btn-bg() {
    background-color: @title-bg;
    .gradient-45_0();
}
// hover、focus - 可覆盖 btn 中样式
@btn-hover-font-color: #444;
.btn-hover-bg() {
    background-color:#7bd2f6;
}
// active-可覆盖 btn 中样式
@btn-activer-font-color: @btn-font-color;
.btn-active-bg() {}
.btn-disabled-bg() {
    background-color: @disable-bg;
}
// primary 按钮样式（可以覆盖 btn 中字体背景等各种样式）
.btn-primary-style() {
    background-color: @title-bg;
    .gradient-45_0();
}
.btn-primary-hover-style() {}
.btn-primary-active-style(){}
@btn-icon-size: 15px;// 按钮中图片尺寸
/* ---------------------------------------------- */
@accordion-border-size: @border-size;// js emptyHeight
@accordion-border: solid @accordion-border-size @border-c;
@accordion-head-font-size: 15px;// head 部分字号
.accordion-head-style(){
    background-color: @title-bg;
}
.accordion-head-hover-style(){
    background-color: @highlight-bg;
    color: @highlight-bg-c;
}

@carousel-ctrl-size: 30px;// 箭头尺寸
@carousel-ctrl-color: #fff;// 箭头颜色
.carousel-ctrl-left-bg(){
    background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, .5) 0%), color-stop(rgba(0, 0, 0, 0) 100%));
    background-image: linear-gradient(to right, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
}
.carousel-ctrl-right-bg(){
    background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0) 0%), color-stop(rgba(0, 0, 0, .5) 100%));
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .5) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
}
@carousel-li-size: 10px;// circle 大小
@carousel-li-color: #fff;// circle 颜色
@carousel-li-light-color: rgba(256, 256, 256, .3);// circle 颜色
@carousel-li-border-size: @border-size;// slide 中边框尺寸

@combobox-border-size: @border-size;
@combobox-border: solid @combobox-border-size @hover-border-c;
@combobox-arrow-w: @textinput-h;

@datagrid-border-size: @border-size;
.datagrid-head-style(){
    background-color: @title-bg;
    .gradient-45_0();
}
@datagrid-td-border: dotted @border-size @border-c;
@datagrid-lockcol-bg: #fafafa;// 锁定列
@datagrid-lockcol-color: @color;
@datagrid-keycol-w: 30px;// checkbox、id 列
@datagrid-page-h: 30px;// js 翻页行高度
@datagrid-arrow-size: 4px;// 排序箭头大小

@dialog-head-h: 30px;// 标题部分字号变化时需修改，同时修改 js 中常量
.dialog-head-style(){
    font-size: @font-size;
    font-weight: bold;
    color: @title-color;
    background-color: @title-bg;
    .gradient-45_0();
}
@dialog-cont-icon-size: 35px;// dialog 中的 icon (info , error)
.dialog-toolbar-style(){
    //    border-top: solid @border-size @border-c;// 工具栏分隔线
    background: @tool-bg;
}

@dividedbox-barSize: 4px; //resizebar 的尺寸 * js:barSize *
@dividedbox-head-h: 25px; // head 高度
@dividedbox-iconSize: 15px;// head 中 icon 及 coll 的尺寸
@dividedbox-headmargin: 5px;// head 各部分的 margin
@dividedbox-ctrl-bg: #c8e0ff;// ctrl 悬停时背景色
// 标题部分及 resizebar
@dividedbox-title-bg: @title-bg;
@dividedbox-title-border-c: @border-c;
@dividedbox-coll-font-size: @font-l-size;
.dividedbox-coll-style(){
    background: @dividedbox-title-bg;
}
@dividedbox-line: @dividedbox-title-border-c @border-size solid; // 分隔线边框、collapse 下边框

@imageview-picbox-bg: rgba(0, 0, 0, .75);// imageview 背景
@imageview-close-bg: rgba(0, 0, 0, .01);// 关闭按钮背景
@imageview-toolbar-bg: rgba(0, 0, 0, .7);// imageview 背景
@imageview-radius: @border-radius;

@menu-sub-position: calc(~"100% - 5px");// 子菜单弹出偏移
@menu-bg: @bg;
@menu-item-border-size: @border-size;// * js:divBorderSize *
@menu-border: @menu-item-border-size solid @border-c;
@menu-in-line:  @border-size solid @border-c;
@menu-toolbar-h: 29px;// * js:toolbarHeight *
@menu-page-size: 18px;// 翻页图标大小
@menu-page-margin: 3px; // 翻页图标左右留白
@menu-empty-ul-h: 6px; // * js:emptyUlHeight *
@menu-li-w: 160px;// * js:liWidth *
@menu-li-h: 25px;// * js:liHeight *

@messagetip-head-h: @dialog-head-h;
.messagetip-head-style(){
    .dialog-head-style();
}

@panel-head-h: @dialog-head-h;// js panel 头部高度
@panel-tool-top: 2px; // 头部工具栏 top 位置
@panel-border: solid 1px @border-c;
.panel-head-style(){
    font-size: 15px;
    background-color: @title-bg;
    .gradient-45_0();
}

// 影响 popupbutton、combobox 弹出 menu 的高度计算 += 2 * (@popup-menu-bsize + @popup-menu-padding)
@popup-menu-bsize: 1px;// popup-menu 边框
@popup-menu-padding: 5px;// popup-menu 上下内边距

@popupbutton-arrow-w: @textinput-h; // 通常情况随 textinput 变化，不需修改

@progress-bar-w: 100px;
@progress-bar-h: 9px;
@progress-bar-bg: @highlight-bg;
@progress-bcolor: @title-bg;
@progress-fbg: @title-bg;
.progress-bg-wave(){
    background-image: -webkit-linear-gradient(45deg,@progress-fbg 24%,transparent 25%,transparent 49%,@progress-fbg 50%,@progress-fbg 74%,transparent 75%);
    background-image: -o-linear-gradient(45deg,@progress-fbg 24%,transparent 25%,transparent 49%,@progress-fbg 50%,@progress-fbg 74%,transparent 75%);
    background-image: linear-gradient(45deg,@progress-fbg 24%,transparent 25%,transparent 49%,@progress-fbg 50%,@progress-fbg 74%,transparent 75%);
    -webkit-background-size: 40px 40px;
    background-size: 40px 40px;
}
.progress-bg-stage(){
    background-repeat: no-repeat;
    background-image: -webkit-linear-gradient(left,transparent,@progress-fbg);
    background-image: -o-linear-gradient(left,transparent,@progress-fbg);
    background-image: linear-gradient(to right,transparent,@progress-fbg);
}
@searchinput-border-size: @border-size;
@searchinput-border: solid @searchinput-border-size @border-c;
@searchinput-h: @textinput-h;

@tabset-padding: 5px;// wi-tabset 的内边距
.tabset-style(){
    .gradient-45_0(top, bottom);
    background-color: @title-bg;
    border: solid 1px @border-c;
}
@tab-margin: 2px;// 标签页之间间距 * js:liAfter *
@tab-ctrl-size: 27px;
@tabset-arrow-color: @tool-color; // defaultbar 箭头颜色
@tabset-arrow-hover-color: @tool-hover-color;  // defaultbar 箭头悬浮颜色
@tab-bsize: @border-size;// 所有 tab 页边框尺寸
// 普通标签页
@tab-color: @title-color;
.tab-style(@from: top, @to: bottom){
    border: solid @tab-bsize @border-c;
    color: @tab-color;
    background-color: @title-bg;
    .gradient-45_0(@from, @to);
}
// 禁用标签页
.tab-disable(){
    .disabled();
}
// 鼠标悬停标签页
.tab-hover-style(@from: top, @to: bottom){
    border-color: @hover-border-c;// 与普通 tab 相同时省略
    color: @hover-color;// 与普通 tab 相同时省略
    background-color: #7bd2f6;
}
// 选中标签页
@tab-active-border: solid @tab-bsize @hover-border-c;// 选中项边框、line 边框、cont 边框
@tabset-active-color: @title-color; // 选中的 tab 页文字颜色
.tab-active-style(@from: top, @to: bottom){
    border: @tab-active-border;
    background: @bg;// 若需渐变可调用 .gradient-45_0()
    color: @tabset-active-color;
}
.tabset-cont-border(){
    border: @tab-active-border;// 无边框时省略
}

@tooltip-bg: @bg;
@tooltip-border-color: @border-c;

@tree-item-h: 22px;
@tree-loading-size: 12px;
@tree-dir-color: #F9E39D;
@tree-file-color: #C2D8F0;